<template>
  <el-row>
    <el-col :span="24" class="mt5">
      <el-descriptions :column="2">
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="套餐编码" />
          </template>
          {{ data.no }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="套餐名称" />
          </template>
          {{ data.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="套餐类型" />
          </template>
          {{ data.packTypeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="适用活动" />
          </template>
          <dict-tag :type="DICT_TYPE.ACTIVITYTYPE" :value="data.suitActivity || ''" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <descriptions-item-label label="创建时间" />
          </template>
          {{ formatDate(data.createTime) }}
        </el-descriptions-item>
      </el-descriptions>
    </el-col>

    <el-divider />
    <el-table :data="data.productRespVOList" style="width: 100%">
      <el-table-column prop="productName" label="商品名称" align="center" />
      <el-table-column prop="merchantName" label="所属商家" align="center" />
      <el-table-column prop="address" label="地址" align="center" width="300px" />
      <el-table-column prop="supplyPrice" label="供货价/总" align="center" />
      <el-table-column prop="platformPrice" label="平台售价/人" align="center" />
      <el-table-column prop="productIntroduct" label="商品介绍" align="center">
        <template #default="scope">
          <el-popover
            :width="300"
            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
          >
            <template #reference>
              <span class="color-blue">查看</span>
            </template>
            <template #default>
              {{ scope.row.productIntroduct }}
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="copiesNum" label="份数" align="center" />
    </el-table>
  </el-row>
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'

const { data } = defineProps<{ data }>()
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
